<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
    <style>
        body {
            margin: 0;
        }
        
        nav {
            width: 100%;
            height: 45px;
            border: 1px solid lightgray;
        }
        
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        
        .container .active a {
            color: #2FB3FF;
            border-bottom: 1px solid #2FB3FF;
        }
        
        .container a {
            display: inline-block;
            text-align: center;
            margin: 0 1px;
            width: 45px;
            height: 45px;
            line-height: 50px;
            font-size: 15px;
            color: black;
            text-decoration: none;
        }
        
        .twoli a,.twoli3 a{
            display: inline-block;
            width: 100px;
            height: 25px;
            margin: 0 5px;
            text-align: left;
            margin-top: 10px;
            line-height: 25px;
        }
        .twoli4 a{
             display: inline-block;
            width: 80px;
            height: 25px;
             text-align: center;
        }
        .twoli li,.twoli3 li{
            float: left;
        }
        
        .active2,.active3{
            position: relative;
        }
        
        .twoli {
            width: 225px;
            height: 150px;
            /*display: flex;*/
            flex-wrap: wrap;
            position: absolute;
            left: -80px;
            display: none;
            border: 1px solid lightgray;
             box-shadow: 0 0 5px #888888;
        }
         .twoli3{
            width: 225px;
            height: 150px;
            /*display: flex;*/
            flex-wrap: wrap;
            position: absolute;
            left: -100px;
            display: none;
            border: 1px solid lightgray;
             box-shadow: 0 0 5px #888888;
        }
        .active4{
            position: relative;
        }
        .twoli4{
            width: 80px;
             height: 150px;
            position: absolute;
            display: none;
             border: 1px solid lightgray;
             box-shadow: 0 0 5px #888888;
        }
        .clear{
            clear:both;
        }
        section{
            height: 2000px;
        }
        /*.active4:hover .jiantou{
              transition: all 0.5s linear;
            transform: rotate(180deg);
        }*/
        .jiantou{
            display: inline-block;
            background-image: url(1.png);
            background-position: -60px 0;
            width: 10px;
            height: 8px;
        }
        
        .left-nav,
        .right-nav {
            display: flex;
        }
    </style>
</head>

<body>
    <nav>
        <div class="container">
            <ul class="left-nav">
                <li class="active"><a href="#">首页</a></li>
                <li class="active2"><a href="#">剧集</a>
                    <ul class="twoli">
                        <li><a href="#">楚乔传 TV版</a></li>
                        <li><a href="#">春风十里不...</a></li>
                        <li><a href="#">镇魂街 第一季</a></li>
                        <li><a href="#">我的前半生</a></li>
                        <li><a href="#">醉玲珑</a></li>
                        <li><a href="#">微微一笑很..</a></li>
                        <li><a href="#">终极三国2017</a></li>
                        <li><a href="#">三生三世十...</a></li>
                         <div class="clear"></div>
                    </ul>
                   
                </li>
                <li class="active3"><a href="#">电影</a>
                 <ul class="twoli3">
                        <li><a href="#">楚乔传 TV版</a></li>
                        <li><a href="#">春风十里不...</a></li>
                        <li><a href="#">镇魂街 第一季</a></li>
                        <li><a href="#">我的前半生</a></li>
                        <li><a href="#">醉玲珑</a></li>
                        <li><a href="#">微微一笑很..</a></li>
                        <li><a href="#">终极三国2017</a></li>
                        <li><a href="#">三生三世十...</a></li>
                         <div class="clear"></div>
                    </ul></li>
                <li><a href="#">综艺</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">少儿</a></li>
                <li><a href="#">来疯</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">片库</a></li>
                <li><a href="#">咨询</a></li>
                <li><a href="#">纪实</a></li>
                <li><a href="#">公益</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">文化</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">搞笑</a></li>
                <li><a href="#">旅游</a></li>
                <li class="active4"><a href="#">更多<span class="jiantou"></span></a>
                <ul class="twoli4" >
                     <li><a href="#">VR</a></li>
                     <li><a href="#">生活</a></li>
                     <li><a href="#">原创</a></li>
                     <li><a href="#">排行</a></li>
                    </ul></li>
            </ul>
            <ul class="right-nav">
                <li><a href="#">下载</a>
                <ul class="twoli5">
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    </ul></li>
            </ul>
        </div>
    </nav>
    <section></section>
</body>

</html>
<script>
    var lias = document.querySelectorAll('.container li a')
    var twoli = document.querySelector('.twoli')
       var twoli3 = document.querySelector('.twoli3')
    var active2=document.querySelector('.active2')
     var active3=document.querySelector('.active3')
     var jiantou=document.querySelector('.jiantou')
      var twoli4 = document.querySelector('.twoli4')
     var active4=document.querySelector('.active4')
    for (var i = 1; i < lias.length; i++) {
        lias[i].index = i;
        lias[i].onmouseover = function () {
            lias[this.index].style.color = 'red';
        }
        lias[i].onmouseout = function () {
            lias[this.index].style.color = ''
        }
    }
    active2.onmouseover=function(){
        twoli.style.display='block';
    }
    active2.onmouseout=function(){
        twoli.style.display='none';
    }
     active3.onmouseover=function(){
        twoli3.style.display='block';
    }
    active3.onmouseout=function(){
        twoli3.style.display='none';
    }
      active4.onmouseover=function(){
        twoli4.style.display='block';
        jiantou.style.transform='rotate(180deg)';
        jiantou.style.transition='all 0.3s linear'
    }
    active4.onmouseout=function(){
        twoli4.style.display='none';
        jiantou.style.transform='rotate(0deg)'
        jiantou.style.transition='all 0.3s linear'
    }
   

</script>